{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "086e0683-8655-47bb-8c51-71df41c97ad5",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "17791716-e26b-421b-b108-e046987d98d8",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c7c01c55-27ec-4922-ac59-c102b8563b4b",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0d83a2b3-9e24-43f1-8923-38622da5c0c6",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "88a3ce43-c624-4d42-9efa-378ace137a23",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaa\n"
     ]
    }
   ],
   "source": [
    "x = 5\n",
    "x = \"a\" * x\n",
    "print(x)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f40d9840-29a3-4d05-ae75-fbe7ace3d1d7",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a93f1efa-2c1a-41ae-bf7e-d046752363df",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "970c82a8-a457-4281-a58c-b40b33375ef3",
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "ad260e06-714a-4f8e-8861-78fb005e8d71",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaa\n"
     ]
    }
   ],
   "source": [
    "x = 5\n",
    "x = \"a\" * xc\n",
    "print(x)\n",
    "\n",
    "x = 9"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7eb82388-efcf-4bc6-a9e5-1e3dd1050b37",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f9d84147-d6a5-4532-8e61-05d152047299",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "118ac3b9-4583-4d22-884d-24621163688e",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "aaaaa\n"
     ]
    },
    {
     "data": {
      "text/plain": [
       "27"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "x = 5\n",
    "x = \"a\" * x\n",
    "print(x)\n",
    "x = 9\n",
    "x * 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "39fd82a6-199a-452d-b96a-708e2ea146a3",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[4, 2, 9]"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a = [4,2,9]\n",
    "a"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "d8d1a7ef-b690-48f2-a78e-fb7aef4ab90f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "9"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a.pop()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "2a50426c-9f1c-4cdb-806b-761d7bb0d5b5",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n",
      "hello\n"
     ]
    },
    {
     "ename": "KeyboardInterrupt",
     "evalue": "",
     "output_type": "error",
     "traceback": [
      "\u001b[1;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[1;31mKeyboardInterrupt\u001b[0m                         Traceback (most recent call last)",
      "Cell \u001b[1;32mIn[10], line 5\u001b[0m\n\u001b[0;32m      3\u001b[0m \u001b[38;5;28;01mwhile\u001b[39;00m \u001b[38;5;28;01mTrue\u001b[39;00m:\n\u001b[0;32m      4\u001b[0m     \u001b[38;5;28mprint\u001b[39m(\u001b[38;5;124m'\u001b[39m\u001b[38;5;124mhello\u001b[39m\u001b[38;5;124m'\u001b[39m)\n\u001b[1;32m----> 5\u001b[0m     time\u001b[38;5;241m.\u001b[39msleep(\u001b[38;5;241m3\u001b[39m)\n",
      "\u001b[1;31mKeyboardInterrupt\u001b[0m: "
     ]
    }
   ],
   "source": [
    "import time\n",
    "\n",
    "while True:\n",
    "    print('hello')\n",
    "    time.sleep(3)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "6c6943f5-f92a-4b7c-b9ee-e4cfa5c43bce",
   "metadata": {},
   "outputs": [],
   "source": [
    "x = 20\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "c7675c36-6b79-4b34-97f0-e0475f27c117",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "done\n"
     ]
    }
   ],
   "source": [
    "print('done')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ba63db2d-f48c-42a0-b09c-dc3884464752",
   "metadata": {},
   "source": [
    "x = 5\n",
    "print(x ** 2）"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "d44a0c24-2e23-406f-8322-6e5fc9061ab8",
   "metadata": {},
   "source": [
    "# 一级标题\n",
    "\n",
    "## 二级标题\n",
    "\n",
    "### 三级标题\n",
    "\n",
    "这是一段普通文本。你可以通过以下方式设置文本样式：\n",
    "\n",
    "- **粗体文本**：使用双星号或双下划线包围文本\n",
    "- *斜体文本*：使用单星号或单下划线包围文本\n",
    "- ~~删除线文本~~：使用波浪线包围文本\n",
    "\n",
    "## 列表\n",
    "\n",
    "### 无序列表\n",
    "- 项目 1\n",
    "- 项目 2\n",
    "  - 子项目 A\n",
    "  - 子项目 B\n",
    "- 项目 3\n",
    "\n",
    "### 有序列表\n",
    "1. 第一步\n",
    "2. 第二步\n",
    "3. 第三步\n",
    "   1. 子步骤 1\n",
    "   2. 子步骤 2\n",
    "\n",
    "## 链接和图片\n",
    "\n",
    "这是一个[指向 GitHub 的链接](https://github.com)。\n",
    "\n",
    "图片示例：\n",
    "![示例图片](https://picsum.photos/800/400)\n",
    "\n",
    "## 代码块\n",
    "\n",
    "行内代码：`print(\"Hello, World!\")`\n",
    "\n",
    "多行代码块：\n",
    "```python\n",
    "def fibonacci(n):\n",
    "    a, b = 0, 1\n",
    "    for _ in range(n):\n",
    "        yield a\n",
    "        a, b = b, a + b\n",
    "\n",
    "# 打印前 10 个斐波那契数\n",
    "for num in fibonacci(10):\n",
    "    print(num)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fbc07559-aefd-4a7c-89fd-f07b5832db38",
   "metadata": {},
   "source": [
    "# Markdown 表格示例\n",
    "\n",
    "## 基本表格\n",
    "\n",
    "| 姓名       | 年龄 | 职业       | 爱好       |\n",
    "|------------|------|------------|------------|\n",
    "| 张三       | 28   | 软件工程师 | 编程、阅读 |\n",
    "| 李四       | 35   | 数据分析师 | 数据可视化 |\n",
    "| 王五       | 42   | 产品经理   | 写作、演讲 |\n",
    "| 赵六       | 25   | UI设计师   | 绘画、摄影 |\n",
    "\n",
    "## 对齐方式\n",
    "\n",
    "| 左对齐       | 居中对齐       | 右对齐       |\n",
    "|--------------|:--------------:|-------------:|\n",
    "| 内容居左     | 内容居中       | 内容居右     |\n",
    "| 这是一个长文本示例 | 中等长度文本   | 短文本       |\n",
    "\n",
    "## 表格内的格式\n",
    "\n",
    "| 功能               | 代码示例                     | 效果         |\n",
    "|--------------------|------------------------------|--------------|\n",
    "| **粗体**           | `**粗体文本**`               | **粗体文本** |\n",
    "| *斜体*             | `*斜体文本*`                 | *斜体文本*   |\n",
    "| [链接](https://example.com) | `[链接](https://example.com)` | [链接](https://example.com) |\n",
    "| `行内代码`         | `` `行内代码` ``             | `行内代码`   |\n",
    "\n",
    "## 复杂表格\n",
    "\n",
    "| 产品名称         | 基础版 | 高级版 | 企业版 |\n",
    "|------------------|--------|--------|--------|\n",
    "| **功能**         |        |        |        |\n",
    "| 数据导入         | ✅      | ✅      | ✅      |\n",
    "| 高级分析         | ❌      | ✅      | ✅      |\n",
    "| 自定义报表       | ❌      | ❌      | ✅      |\n",
    "| **价格**         |        |        |        |\n",
    "| 月付             | $9.99  | $19.99 | $49.99 |\n",
    "| 年付             | $99.99 | $199.99| $499.99|\n",
    "\n",
    "## 表格与其他元素混合\n",
    "\n",
    "### 列表与表格\n",
    "\n",
    "1. 第一步：创建表头\n",
    "   | 列1 | 列2 |\n",
    "   |-----|-----|\n",
    "2. 第二步：添加分隔线\n",
    "   |-----|-----|\n",
    "3. 第三步：添加内容\n",
    "   | 数据1 | 数据2 |\n",
    "\n",
    "### 引用与表格\n",
    "\n",
    "> 以下是一个引用块中的表格：\n",
    "> \n",
    "> | 引用表格列1 | 引用表格列2 |\n",
    "> |-------------|-------------|\n",
    "> | 单元格1     | 单元格2     |\n",
    "\n",
    "## 转义字符\n",
    "\n",
    "如果需要在表格中使用竖线 `|`，可以使用 HTML 实体 `&#124;`：\n",
    "\n",
    "| 转义示例       | 代码               |\n",
    "|----------------|--------------------|\n",
    "| 包含&#124;符号 | `包含&#124;符号`   |\n",
    "| 管道\\|符号     | `管道\\|符号`       |\n",
    "\n",
    "## 嵌套表格\n",
    "\n",
    "虽然 Markdown 本身不直接支持嵌套表格，但可以通过 HTML 实现：\n",
    "\n",
    "| 列1       | 列2       |\n",
    "|-----------|-----------|\n",
    "| 普通内容  | <table><tr><td>嵌套表格</td></tr></table> |"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a7660a44-ba7b-4c40-b5cf-bd4b842575d9",
   "metadata": {},
   "source": [
    "<!DOCTYPE html>\n",
    "<html lang=\"zh-CN\">\n",
    "<head>\n",
    "    <meta charset=\"UTF-8\">\n",
    "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
    "    <title>HTML示例页面</title>\n",
    "    <script src=\"https://cdn.tailwindcss.com\"></script>\n",
    "    <link href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css\" rel=\"stylesheet\">\n",
    "    <script>\n",
    "        tailwind.config = {\n",
    "            theme: {\n",
    "                extend: {\n",
    "                    colors: {\n",
    "                        primary: '#165DFF',\n",
    "                        secondary: '#FF7D00',\n",
    "                        neutral: '#F5F7FA',\n",
    "                        dark: '#1D2129',\n",
    "                    },\n",
    "                    fontFamily: {\n",
    "                        inter: ['Inter', 'system-ui', 'sans-serif'],\n",
    "                    },\n",
    "                }\n",
    "            }\n",
    "        }\n",
    "    </script>\n",
    "    <style type=\"text/tailwindcss\">\n",
    "        @layer utilities {\n",
    "            .content-auto {\n",
    "                content-visibility: auto;\n",
    "            }\n",
    "            .text-shadow {\n",
    "                text-shadow: 0 2px 4px rgba(0,0,0,0.1);\n",
    "            }\n",
    "            .transition-custom {\n",
    "                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n",
    "            }\n",
    "        }\n",
    "    </style>\n",
    "</head>\n",
    "<body class=\"font-inter bg-gray-50 text-dark\">\n",
    "    <!-- 导航栏 -->\n",
    "    <header class=\"sticky top-0 z-50 bg-white shadow-sm transition-custom\">\n",
    "        <div class=\"container mx-auto px-4 py-3 flex justify-between items-center\">\n",
    "            <a href=\"#\" class=\"flex items-center space-x-2\">\n",
    "                <i class=\"fa-solid fa-code text-primary text-2xl\"></i>\n",
    "                <span class=\"text-xl font-bold text-primary\">HTML示例</span>\n",
    "            </a>\n",
    "            <nav class=\"hidden md:flex space-x-8\">\n",
    "                <a href=\"#intro\" class=\"text-gray-700 hover:text-primary transition-custom\">简介</a>\n",
    "                <a href=\"#components\" class=\"text-gray-700 hover:text-primary transition-custom\">组件</a>\n",
    "                <a href=\"#form\" class=\"text-gray-700 hover:text-primary transition-custom\">表单</a>\n",
    "                <a href=\"#gallery\" class=\"text-gray-700 hover:text-primary transition-custom\">图库</a>\n",
    "                <a href=\"#footer\" class=\"text-gray-700 hover:text-primary transition-custom\">页脚</a>\n",
    "            </nav>\n",
    "            <button class=\"md:hidden text-gray-700\">\n",
    "                <i class=\"fa-solid fa-bars text-xl\"></i>\n",
    "            </button>\n",
    "        </div>\n",
    "    </header>\n",
    "\n",
    "    <!-- 英雄区 -->\n",
    "    <section id=\"intro\" class=\"relative bg-gradient-to-r from-primary to-primary/80 text-white py-20 md:py-32 overflow-hidden\">\n",
    "        <div class=\"absolute inset-0 opacity-10\">\n",
    "            <div class=\"absolute w-64 h-64 rounded-full bg-white/30 -top-10 -left-10 blur-3xl\"></div>\n",
    "            <div class=\"absolute w-64 h-64 rounded-full bg-white/30 top-1/2 right-1/4 blur-3xl\"></div>\n",
    "            <div class=\"absolute w-64 h-64 rounded-full bg-white/30 -bottom-10 -right-10 blur-3xl\"></div>\n",
    "        </div>\n",
    "        <div class=\"container mx-auto px-4 relative z-10\">\n",
    "            <div class=\"max-w-3xl mx-auto text-center\">\n",
    "                <h1 class=\"text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6 text-shadow\">\n",
    "                    探索HTML的奇妙世界\n",
    "                </h1>\n",
    "                <p class=\"text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-8 max-w-2xl mx-auto\">\n",
    "                    从基础标签到高级组件，这个示例展示了现代HTML的强大功能和灵活性。\n",
    "                </p>\n",
    "                <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n",
    "                    <a href=\"#components\" class=\"bg-white text-primary font-medium px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transition-custom transform hover:-translate-y-1\">\n",
    "                        探索组件\n",
    "                    </a>\n",
    "                    <a href=\"#form\" class=\"bg-transparent border-2 border-white text-white font-medium px-6 py-3 rounded-lg hover:bg-white/10 transition-custom\">\n",
    "                        查看表单\n",
    "                    </a>\n",
    "                </div>\n",
    "            </div>\n",
    "        </div>\n",
    "    </section>\n",
    "\n",
    "    <!-- 组件展示区 -->\n",
    "    <section id=\"components\" class=\"py-16 bg-white\">\n",
    "        <div class=\"container mx-auto px-4\">\n",
    "            <div class=\"text-center mb-16\">\n",
    "                <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4\">常用HTML组件</h2>\n",
    "                <p class=\"text-gray-600 max-w-2xl mx-auto\">这些组件展示了HTML与Tailwind CSS结合的强大功能和美观效果</p>\n",
    "            </div>\n",
    "\n",
    "            <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8\">\n",
    "                <!-- 卡片1 -->\n",
    "                <div class=\"bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-custom transform hover:-translate-y-1\">\n",
    "                    <div class=\"h-48 bg-gray-200 overflow-hidden\">\n",
    "                        <img src=\"https://picsum.photos/600/400?random=1\" alt=\"示例图片\" class=\"w-full h-full object-cover transition-custom hover:scale-110\">\n",
    "                    </div>\n",
    "                    <div class=\"p-6\">\n",
    "                        <h3 class=\"text-xl font-bold mb-2\">卡片组件</h3>\n",
    "                        <p class=\"text-gray-600 mb-4\">卡片是现代UI设计中常用的组件，用于展示内容块，支持图片、标题和描述。</p>\n",
    "                        <div class=\"flex justify-between items-center\">\n",
    "                            <span class=\"text-sm text-gray-500\">2023年10月15日</span>\n",
    "                            <button class=\"text-primary hover:text-primary/80 font-medium transition-custom\">\n",
    "                                阅读更多 <i class=\"fa-solid fa-arrow-right ml-1\"></i>\n",
    "                            </button>\n",
    "                        </div>\n",
    "                    </div>\n",
    "                </div>\n",
    "\n",
    "                <!-- 卡片2 -->\n",
    "                <div class=\"bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-custom transform hover:-translate-y-1\">\n",
    "                    <div class=\"h-48 bg-gray-200 overflow-hidden\">\n",
    "                        <img src=\"https://picsum.photos/600/400?random=2\" alt=\"示例图片\" class=\"w-full h-full object-cover transition-custom hover:scale-110\">\n",
    "                    </div>\n",
    "                    <div class=\"p-6\">\n",
    "                        <h3 class=\"text-xl font-bold mb-2\">特性展示</h3>\n",
    "                        <p class=\"text-gray-600 mb-4\">使用图标和清晰的排版来突出产品或网站的核心特性，增强用户理解。</p>\n",
    "                        <div class=\"flex space-x-2 mt-4\">\n",
    "                            <span class=\"px-3 py-1 bg-blue-100 text-blue-800 text-xs rounded-full\">设计</span>\n",
    "                            <span class=\"px-3 py-1 bg-green-100 text-green-800 text-xs rounded-full\">UI</span>\n",
    "                        </div>\n",
    "                    </div>\n",
    "                </div>\n",
    "\n",
    "                <!-- 卡片3 -->\n",
    "                <div class=\"bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition-custom transform hover:-translate-y-1\">\n",
    "                    <div class=\"h-48 bg-gray-200 overflow-hidden\">\n",
    "                        <img src=\"https://picsum.photos/600/400?random=3\" alt=\"示例图片\" class=\"w-full h-full object-cover transition-custom hover:scale-110\">\n",
    "                    </div>\n",
    "                    <div class=\"p-6\">\n",
    "                        <h3 class=\"text-xl font-bold mb-2\">交互元素</h3>\n",
    "                        <p class=\"text-gray-600 mb-4\">添加悬停效果、过渡动画和微交互可以大大提升用户体验和界面吸引力。</p>\n",
    "                        <div class=\"flex justify-between items-center\">\n",
    "                            <div class=\"flex space-x-3\">\n",
    "                                <button class=\"text-gray-500 hover:text-primary transition-custom\">\n",
    "                                    <i class=\"fa-solid fa-heart\"></i>\n",
    "                                </button>\n",
    "                                <button class=\"text-gray-500 hover:text-primary transition-custom\">\n",
    "                                    <i class=\"fa-solid fa-bookmark\"></i>\n",
    "                                </button>\n",
    "                            </div>\n",
    "                            <button class=\"text-primary hover:text-primary/80 font-medium transition-custom\">\n",
    "                                查看详情 <i class=\"fa-solid fa-arrow-right ml-1\"></i>\n",
    "                            </button>\n",
    "                        </div>\n",
    "                    </div>\n",
    "                </div>\n",
    "            </div>\n",
    "        </div>\n",
    "    </section>\n",
    "\n",
    "    <!-- 表单区域 -->\n",
    "    <section id=\"form\" class=\"py-16 bg-neutral\">\n",
    "        <div class=\"container mx-auto px-4\">\n",
    "            <div class=\"max-w-3xl mx-auto bg-white rounded-xl shadow-lg p-8 md:p-12\">\n",
    "                <h2 class=\"text-2xl md:text-3xl font-bold mb-6\">联系我们</h2>\n",
    "                <p class=\"text-gray-600 mb-8\">请填写以下表单，我们会尽快回复您的咨询</p>\n",
    "                \n",
    "                <form class=\"space-y-6\">\n",
    "                    <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n",
    "                        <div>\n",
    "                            <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-1\">姓名</label>\n",
    "                            <input type=\"text\" id=\"name\" name=\"name\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom\" placeholder=\"请输入您的姓名\">\n",
    "                        </div>\n",
    "                        <div>\n",
    "                            <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-1\">邮箱</label>\n",
    "                            <input type=\"email\" id=\"email\" name=\"email\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom\" placeholder=\"请输入您的邮箱\">\n",
    "                        </div>\n",
    "                    </div>\n",
    "                    \n",
    "                    <div>\n",
    "                        <label for=\"subject\" class=\"block text-sm font-medium text-gray-700 mb-1\">主题</label>\n",
    "                        <select id=\"subject\" name=\"subject\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom\">\n",
    "                            <option value=\"\">请选择咨询主题</option>\n",
    "                            <option value=\"general\">一般咨询</option>\n",
    "                            <option value=\"support\">技术支持</option>\n",
    "                            <option value=\"feedback\">反馈建议</option>\n",
    "                            <option value=\"other\">其他</option>\n",
    "                        </select>\n",
    "                    </div>\n",
    "                    \n",
    "                    <div>\n",
    "                        <label for=\"message\" class=\"block text-sm font-medium text-gray-700 mb-1\">留言内容</label>\n",
    "                        <textarea id=\"message\" name=\"message\" rows=\"5\" class=\"w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-custom\" placeholder=\"请输入您的留言内容\"></textarea>\n",
    "                    </div>\n",
    "                    \n",
    "                    <div class=\"flex items-start\">\n",
    "                        <div class=\"flex items-center h-5\">\n",
    "                            <input id=\"privacy\" name=\"privacy\" type=\"checkbox\" class=\"w-4 h-4 border border-gray-300 rounded focus:ring-primary text-primary transition-custom\">\n",
    "                        </div>\n",
    "                        <div class=\"ml-3 text-sm\">\n",
    "                            <label for=\"privacy\" class=\"text-gray-600\">我同意<a href=\"#\" class=\"text-primary hover:underline\">隐私政策</a>和<a href=\"#\" class=\"text-primary hover:underline\">服务条款</a></label>\n",
    "                        </div>\n",
    "                    </div>\n",
    "                    \n",
    "                    <div>\n",
    "                        <button type=\"submit\" class=\"w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-custom transform hover:-translate-y-1 shadow-lg hover:shadow-xl\">\n",
    "                            提交表单\n",
    "                        </button>\n",
    "                    </div>\n",
    "                </form>\n",
    "            </div>\n",
    "        </div>\n",
    "    </section>\n",
    "\n",
    "    <!-- 图库区域 -->\n",
    "    <section id=\"gallery\" class=\"py-16 bg-white\">\n",
    "        <div class=\"container mx-auto px-4\">\n",
    "            <div class=\"text-center mb-12\">\n",
    "                <h2 class=\"text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4\">图片画廊</h2>\n",
    "                <p class=\"text-gray-600 max-w-2xl mx-auto\">使用网格布局和过渡动画创建的响应式图片画廊</p>\n",
    "            </div>\n",
    "\n",
    "            <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n",
    "                <div class=\"overflow-hidden rounded-xl group\">\n",
    "                    <img src=\"https://picsum.photos/600/400?random=10\" alt=\"风景照片\" class=\"w-full h-64 object-cover transition-custom duration-500 group-hover:scale-110\">\n",
    "                    <div class=\"p-4 bg-white border border-t-0 rounded-b-xl\">\n",
    "                        <h3 class=\"font-medium\">山间湖泊</h3>\n",
    "                        <p class=\"text-sm text-gray-600\">宁静的自然风光</p>\n",
    "                    </div>\n",
    "                </div>\n",
    "                <div class=\"overflow-hidden rounded-xl group\">\n",
    "                    <img src=\"https://picsum.photos/600/400?random=11\" alt=\"城市照片\" class=\"w-full h-64 object-cover transition-custom duration-500 group-hover:scale-110\">\n",
    "                    <div class=\"p-4 bg-white border border-t-0 rounded-b-xl\">\n",
    "                        <h3 class=\"font-medium\">城市天际线</h3>\n",
    "                        <p class=\"text-sm text-gray-600\">现代都市风光</p>\n",
    "                    </div>\n",
    "                </div>\n",
    "                <div class=\"overflow-hidden rounded-xl group\">\n",
    "                    <img src=\"https://picsum.photos/600/400?random=12\" alt=\"自然照片\" class=\"w-full h-64 object-cover transition-custom duration-500 group-hover:scale-110\">\n",
    "                    <div class=\"p-4 bg-white border border-t-0 rounded-b-xl\">\n",
    "                        <h3 class=\"font-medium\">森林小径</h3>\n",
    "                        <p class=\"text-sm text-gray-600\">探索自然之美</p>\n",
    "                    </div>\n",
    "                </div>\n",
    "                <div class=\"overflow-hidden rounded-xl group\">\n",
    "                    <img src=\"https://picsum.photos/600/400?random=13\" alt=\"海滩照片\" class=\"w-full h-64 object-cover transition-custom duration-500 group-hover:scale-110\">\n",
    "                    <div class=\"p-4 bg-white border border-t-0 rounded-b-xl\">\n",
    "                        <h3 class=\"font-medium\">日落海滩</h3>\n",
    "                        <p class=\"text-sm text-gray-600\">海边日落美景</p>\n",
    "                    </div>\n",
    "                </div>\n",
    "                <div class=\"overflow-hidden rounded-xl group\">\n",
    "                    <img src=\"https://picsum.photos/600/400?random=14\" alt=\"山脉照片\" class=\"w-full h-64 object-cover transition-custom duration-500 group-hover:scale-110\">\n",
    "                    <div class=\"p-4 bg-white border border-t-0 rounded-b-xl\">\n",
    "                        <h3 class=\"font-medium\">雪山风光</h3>\n",
    "                        <p class=\"text-sm text-gray-600\">雄伟的高山景观</p>\n",
    "                    </div>\n",
    "                </div>\n",
    "                <div class=\"overflow-hidden rounded-xl group\">\n",
    "                    <img src=\"https://picsum.photos/600/400?random=15\" alt=\"夜景照片\" class=\"w-full h-64 object-cover transition-custom duration-500 group-hover:scale-110\">\n",
    "                    <div class=\"p-4 bg-white border border-t-0 rounded-b-xl\">\n",
    "                        <h3 class=\"font-medium\">城市夜景</h3>\n",
    "                        <p class=\"text-sm text-gray-600\">灯火辉煌的城市</p>\n",
    "                    </div>\n",
    "                </div>\n",
    "            </div>\n",
    "        </div>\n",
    "    </section>\n",
    "\n",
    "    <!-- 页脚 -->\n",
    "    <footer id=\"footer\" class=\"bg-dark text-white py-12\">\n",
    "        <div class=\"container mx-auto px-4\">\n",
    "            <div class=\"grid grid-cols-1 md:grid-cols-4 gap-8\">\n",
    "                <div>\n",
    "                    <h3 class=\"text-lg font-bold mb-4\">HTML示例</h3>\n",
    "                    <p class=\"text-gray-400 mb-4\">探索现代HTML与Tailwind CSS结合的强大功能</p>\n",
    "                    <div class=\"flex space-x-4\">\n",
    "                        <a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">\n",
    "                            <i class=\"fa-brands fa-github\"></i>\n",
    "                        </a>\n",
    "                        <a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">\n",
    "                            <i class=\"fa-brands fa-twitter\"></i>\n",
    "                        </a>\n",
    "                        <a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">\n",
    "                            <i class=\"fa-brands fa-linkedin\"></i>\n",
    "                        </a>\n",
    "                    </div>\n",
    "                </div>\n",
    "                <div>\n",
    "                    <h3 class=\"text-lg font-bold mb-4\">快速链接</h3>\n",
    "                    <ul class=\"space-y-2\">\n",
    "                        <li><a href=\"#intro\" class=\"text-gray-400 hover:text-white transition-custom\">简介</a></li>\n",
    "                        <li><a href=\"#components\" class=\"text-gray-400 hover:text-white transition-custom\">组件</a></li>\n",
    "                        <li><a href=\"#form\" class=\"text-gray-400 hover:text-white transition-custom\">表单</a></li>\n",
    "                        <li><a href=\"#gallery\" class=\"text-gray-400 hover:text-white transition-custom\">图库</a></li>\n",
    "                    </ul>\n",
    "                </div>\n",
    "                <div>\n",
    "                    <h3 class=\"text-lg font-bold mb-4\">资源</h3>\n",
    "                    <ul class=\"space-y-2\">\n",
    "                        <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">文档</a></li>\n",
    "                        <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">教程</a></li>\n",
    "                        <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">API参考</a></li>\n",
    "                        <li><a href=\"#\" class=\"text-gray-400 hover:text-white transition-custom\">示例</a></li>\n",
    "                    </ul>\n",
    "                </div>\n",
    "                <div>\n",
    "                    <h3 class=\"text-lg font-bold mb-4\">联系我们</h3>\n",
    "                    <ul class=\"space-y-2\">\n",
    "                        <li class=\"flex items-start\">\n",
    "                            <i class=\"fa-solid fa-map-marker-alt mt-1 mr-3 text-gray-400\"></i>\n",
    "                            <span class=\"text-gray-400\">北京市朝阳区科技园A座1001室</span>\n",
    "                        </li>\n",
    "                        <li class=\"flex items-center\">\n",
    "                            <i class=\"fa-solid fa-phone mr-3 text-gray-400\"></i>\n",
    "                            <span class=\"text-gray-400\">+86 10 8888 8888</span>\n",
    "                        </li>\n",
    "                        <li class=\"flex items-center\">\n",
    "                            <i class=\"fa-solid fa-envelope mr-3 text-gray-400\"></i>\n",
    "                            <span class=\"text-gray-400\">contact@example.com</span>\n",
    "                        </li>\n",
    "                    </ul>\n",
    "                </div>\n",
    "            </div>\n",
    "            <div class=\"border-t border-gray-800 mt-10 pt-6 text-center text-gray-500 text-sm\">\n",
    "                <p>&copy; 2023 HTML示例. 保留所有权利.</p>\n",
    "            </div>\n",
    "        </div>\n",
    "    </footer>\n",
    "\n",
    "    <!-- JavaScript -->\n",
    "    <script>\n",
    "        // 导航栏滚动效果\n",
    "        window.addEventListener('scroll', function() {\n",
    "            const header = document.querySelector('header');\n",
    "            if (window.scrollY > 10) {\n",
    "                header.classList.add('py-2', 'shadow-md');\n",
    "                header.classList.remove('py-3', 'shadow-sm');\n",
    "            } else {\n",
    "                header.classList.add('py-3', 'shadow-sm');\n",
    "                header.classList.remove('py-2', 'shadow-md');\n",
    "            }\n",
    "        });\n",
    "\n",
    "        // 平滑滚动\n",
    "        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n",
    "            anchor.addEventListener('click', function (e) {\n",
    "                e.preventDefault();\n",
    "                document.querySelector(this.getAttribute('href')).scrollIntoView({\n",
    "                    behavior: 'smooth'\n",
    "                });\n",
    "            });\n",
    "        });\n",
    "\n",
    "        // 图片懒加载\n",
    "        document.addEventListener(\"DOMContentLoaded\", function() {\n",
    "            const lazyImages = [].slice.call(document.querySelectorAll(\"img\"));\n",
    "            \n",
    "            if (\"IntersectionObserver\" in window) {\n",
    "                let lazyImageObserver = new IntersectionObserver(function(entries, observer) {\n",
    "                    entries.forEach(function(entry) {\n",
    "                        if (entry.isIntersecting) {\n",
    "                            let lazyImage = entry.target;\n",
    "                            lazyImage.classList.add(\"fade-in\");\n",
    "                            lazyImageObserver.unobserve(lazyImage);\n",
    "                        }\n",
    "                    });\n",
    "                });\n",
    "                \n",
    "                lazyImages.forEach(function(lazyImage) {\n",
    "                    lazyImageObserver.observe(lazyImage);\n",
    "                });\n",
    "            }\n",
    "        });\n",
    "    </script>\n",
    "</body>\n",
    "</html>\n",
    "    "
   ]
  },
  {
   "cell_type": "markdown",
   "id": "224a10bf-baa6-454f-b509-a93075b3ad30",
   "metadata": {},
   "source": [
    "\n",
    "牛顿-莱布尼茨公式：\n",
    "\\[\n",
    "\\int_{a}^{b} f(x) \\, dx = F(b) - F(a)\n",
    "\\]\n",
    "其中 \\( F \\) 是 \\( f \\) 的一个原函数。\n",
    "\n",
    "多元函数的泰勒展开式：\n",
    "\\[\n",
    "f(\\mathbf{x}) = f(\\mathbf{a}) + \\nabla f(\\mathbf{a})^T (\\mathbf{x} - \\mathbf{a}) + \\frac{1}{2} (\\mathbf{x} - \\mathbf{a})^T H_f(\\mathbf{a}) (\\mathbf{x} - \\mathbf{a}) + \\cdots\n",
    "\\]\n",
    "其中 \\( H_f(\\mathbf{a}) \\) 是 \\( f \\) 在点 \\( \\mathbf{a} \\) 处的 Hessian 矩阵。\n",
    "\n",
    "\\subsection{概率论与统计学}\n",
    "多元正态分布的概率密度函数：\n",
    "\\[\n",
    "f(\\mathbf{x}; \\boldsymbol{\\mu}, \\boldsymbol{\\Sigma}) = \\frac{1}{(2\\pi)^{n/2} |\\boldsymbol{\\Sigma}|^{1/2}} \\exp\\left( -\\frac{1}{2} (\\mathbf{x} - \\boldsymbol{\\mu})^T \\boldsymbol{\\Sigma}^{-1} (\\mathbf{x} - \\boldsymbol{\\mu}) \\right)\n",
    "\\]\n",
    "其中 \\( \\mathbf{x} \\in \\mathbb{R}^n \\)，\\( \\boldsymbol{\\mu} \\) 是均值向量，\\( \\boldsymbol{\\Sigma} \\) 是协方差矩阵。\n",
    "\n",
    "\\subsection{量子力学}\n",
    "薛定谔方程：\n",
    "\\[\n",
    "i\\hbar \\frac{\\partial}{\\partial t} \\Psi(\\mathbf{r}, t) = \\left[ -\\frac{\\hbar^2}{2m} \\nabla^2 + V(\\mathbf{r}, t) \\right] \\Psi(\\mathbf{r}, t)\n",
    "\\]\n",
    "\n",
    "\\subsection{机器学习}\n",
    "神经网络的反向传播算法中的梯度计算：\n",
    "\\[\n",
    "\\frac{\\partial \\mathcal{L}}{\\partial W_{ij}^{(l)}} = \\sum_{k} \\delta_k^{(l)} a_j^{(l-1)}\n",
    "\\]\n",
    "其中 \\( \\delta_k^{(l)} \\) 是误差项，\\( a_j^{(l-1)} \\) 是前一层的激活值。\n",
    "\n",
    "\\subsection{特殊函数与恒等式}\n",
    "贝塞尔函数的积分表示：\n",
    "\\[\n",
    "J_n(x) = \\frac{1}{\\pi} \\int_{0}^{\\pi} \\cos(n\\theta - x\\sin\\theta) \\, d\\theta\n",
    "\\]\n",
    "\n",
    "黎曼 ζ 函数与素数的关系（欧拉乘积公式）：\n",
    "\\[\n",
    "\\zeta(s) = \\prod_{p \\text{ prime}} \\frac{1}{1 - p^{-s}} = \\sum_{n=1}^{\\infty} \\frac{1}{n^s} \\quad (\\Re(s) > 1)\n",
    "\\]\n",
    "\n",
    "\\end{document}"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "84ccf4c9-ae75-465f-8b63-9ce554cc8c71",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.12.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
